<template>
  <div id="select_course">
    <div class="logo_header">
      <LogoHeader />
    </div>
    <div class="infos_header">
      <InfosHeader />
    </div>
    <div id="select_header">
      <h1>学生选课--班级选择</h1>
    </div>

    <el-row v-if="class_num">
      <el-col :span="24">
        <div class="tips">请为课程：{{ co_se_name }}，选择一个班级!</div>
      </el-col>
    </el-row>

    <div id="main">
      <div v-if="class_num">
        <ul>
          <li class="info" v-for="(info, index) in class_infos" :key="index">
            <el-main>
              <el-descriptions title="">
                <el-descriptions-item label="班级名称">{{
                  info.cl_name
                }}</el-descriptions-item>
                <el-descriptions-item label="班级人数"
                  >{{ info.cl_number }}
                  <el-tag size="small">班级上限为30人</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="上课时间">{{
                  info.cl_time
                }}</el-descriptions-item>
              </el-descriptions>
              <div class="add_bottom">
                <el-button
                  type="primary"
                  @click="addForm(info.cl_id)"
                  :disabled="info.cl_number == 30"
                  >确认加入班级</el-button
                >
              </div>
            </el-main>
          </li>
        </ul>
      </div>
      <div v-else>
        <el-empty description="没有可选的课程，请选课！"></el-empty>
      </div>
    </div>
  </div>
</template>

<script>
import LogoHeader from "../components/logo.vue";
import InfosHeader from "../components/infos_header.vue";
export default {
  inject: ["reload"],
  name: "st_select_course",
  components: {
    LogoHeader,
    InfosHeader,
  },
  data() {
    return {
      co_se_name: "",
      co_name: "",
      class_infos: [],
      class_num: true,
    };
  },
  methods: {
    loadCourseData() {
      let i = 0,
        num;
      this.axios
        .get("http://10.197.43.62:8088/student/notcourse?st_id=" + this.st_id)
        .then((res) => {
          num = res.data.length;
          for (i; i < num; i++) {
            if (res.data[i].co_id == this.co_se_id) {
              this.co_se_name = res.data[i].co_name;
            }
          }
        });
    },
    loadClassData() {
      let i,
        num = 0;
      this.axios
        .get(
          "http://10.197.43.62:8088/teacher/classlist?co_id=" +
            this.co_se_id +
            "&st_id=" +
            this.st_id
        )
        .then((res) => {
          this.class_infos = res.data;
          for (i = 0; i < res.data.length; i++) {
            if (res.data.cl_number == 30) num++;
          }
          if (num == res.data.length) {
            this.class_num = false;
            this.$message({
              message: "无可选班级",
              type: "danger",
            });
          }
        });
    },

    addForm(cl_id) {
      this.axios
        .get(
          "http://10.197.43.62:8088/student/addclass?cl_id=" +
            cl_id +
            "&co_id=" +
            this.co_se_id +
            "&st_id=" +
            this.st_id
        )
        .then((res) => {
          console.log("当前选择课程id：");
          console.log(this.co_se_id);
          console.log("当前选择班级id：");
          console.log(cl_id);
          if (res.data.data === 1) {
            this.$message({
              message: "恭喜你，选课成功！",
              type: "success",
            });
          } else {
            this.$message({
              message: "选课失败",
              type: "danger",
            });
          }
        });
      this.axios
        .get(
          "http://10.197.43.62:8088/student/addcourse?co_id=" +
            this.co_se_id +
            "&st_id=" +
            this.st_id
        )
        .then(() => {
          this.$router.push("/st_course");
        });
    },
  },
  mounted() {
    this.loadCourseData();
    this.loadClassData();
  },

  computed: {
    co_se_id() {
      return this.$store.state.co_se_id;
    },
    st_id() {
      return this.$store.state.st_id;
    },
  },
};
</script>

<style scoped>
ul,
li {
  list-style: none;
}

a {
  text-decoration: none;
  outline: none;
  color: #000;
}

#select_course {
  z-index: -1;
  width: 100%;
  background-image: url(../assets/img/bg.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  overflow: hidden;
  min-height: 100vh;
  position: absolute;
}

/*  */
#select_header {
  padding: 10px 300px 20px;
}

h1 {
  text-align: center;
  line-height: 60px;
  height: 60px;
  width: 600px;
  margin: 0 auto;
  font-size: 25px;
}

.tips {
  text-align: center;
  color: red;
}

/*  */
#main {
  width: 700px;
  margin: 0 auto;
  background-color: #ecf5ff8f;
}

.info {
  margin: 10px;
  font-size: 30px;
}

.add_bottom {
  float: right;
  margin: 10px 0;
}
</style>
<style>
#select_course .el-descriptions-item {
  display: block;
  padding: 10px;
  font-size: 20px;
}

#select_course .el-tag--light {
  margin: 10px;
}
#select_course .el-empty {
  height: 450px;
  background-color: #fff;
}
</style>